import { Image, Divider, Button, Input, Swiper, Grid, NoticeBar, Ellipsis, CenterPopup } from 'antd-mobile';
// import { useLocation, useParams, useSearchParams } from 'react-router-dom';
import { MessageOutline, CloseOutline } from 'antd-mobile-icons';
import { useState } from 'react';
import ThePositions from './ThePositions';
import { Link } from 'react-router-dom';

function Home() {
  // // useSearchParams用于获取url中的查询参数，即?后的部分
  // const [searchParams] = useSearchParams();
  // console.log('searchParams.get("a") =>', searchParams.get('a'));

  // // useParams钩子用来获取动态路由的参数
  // const params = useParams();
  // console.log('params =>', params);

  // // useLocation用于获取state传参
  // const location = useLocation();
  // console.log('location.state =>', location.state);

  // 顶部广告
  const [isVisibleTopAd, setIsVisibleTopAd] = useState(true);

  // 聊天弹框
  const [isVisibleChat, setIsVisibleChat] = useState(false);

  // 功能模块
  const menuList = [
    { title: '招聘会', icon: '/src/assets/imgs/menu-zph.f1662b7.png' },
    { title: '事业单位', icon: '/src/assets/imgs/menu-sydw.9a397dd.png' },
    { title: '优质企业', icon: '/src/assets/imgs/menu-yzqy.41f30b6.png' },
    { title: '校园招聘', icon: '/src/assets/imgs/menu-bys.2d3ecf8.png' },
    { title: '职位/行业', icon: '/src/assets/imgs/menu-zwhy.532ac1e.png' },
    { title: '兼职', icon: '/src/assets/imgs/menu-jz.2111ca4.png' },
    { title: '实习', icon: '/src/assets/imgs/menu-ssd.png' },
    { title: '最新职位', icon: '/src/assets/imgs/menu-zxzw.4ece9fc.png' },
    { title: '急聘职位', icon: '/src/assets/imgs/menu-jpzw.da24640.png' },
    { title: '蓝领招聘', icon: '/src/assets/imgs/menu-llzp.2751da9.png' },
  ];

  // 发现栏滚动内容
  const discoverBarText = (
    <>
      <a href="/article/60c5ef29-cc14-49d4-8b09-439f00e074be" className="text-[#666]">
        不论什么岗位都要签竞业限制协议吗？
      </a>
      <a href="/article/60c5ef29-cc14-49d4-8b09-439f00e074be" className="ml-[30px] text-[#666]">
        @灵活就业人员：办理参保、领社保补贴，指南来了→
      </a>
      <a href="/article/60c5ef29-cc14-49d4-8b09-439f00e074be" className="ml-[30px] text-[#666]">
        非法职业中介如何防范？
      </a>
    </>
  );

  // 知名企业
  interface Company {
    id: number;
    title: string;
    src: string;
  }
  const companyList: Company[] = [
    { id: 1, title: '南宁轨道交通', src: '/src/assets/imgs/qg240819.gif' },
    { id: 2, title: '数字广西集团', src: '/src/assets/imgs/sz221024.gif' },
    { id: 3, title: '抖动科技', src: '/src/assets/imgs/dd210225.gif' },
    { id: 4, title: '招商银行', src: '/src/assets/imgs/zs220317.gif' },
    { id: 5, title: '广投综合能源', src: '/src/assets/imgs/zh240815.jpg' },
    { id: 6, title: '南宁轨道交通', src: '/src/assets/imgs/qg240819.gif' },
    { id: 7, title: '数字广西集团', src: '/src/assets/imgs/sz221024.gif' },
    { id: 8, title: '抖动科技', src: '/src/assets/imgs/dd210225.gif' },
    { id: 9, title: '招商银行', src: '/src/assets/imgs/zs220317.gif' },
    { id: 10, title: '广投综合能源', src: '/src/assets/imgs/zh240815.jpg' },
    { id: 11, title: '南宁轨道交通', src: '/src/assets/imgs/qg240819.gif' },
    { id: 12, title: '数字广西集团', src: '/src/assets/imgs/sz221024.gif' },
    { id: 13, title: '抖动科技', src: '/src/assets/imgs/dd210225.gif' },
    { id: 14, title: '招商银行', src: '/src/assets/imgs/zs220317.gif' },
    { id: 15, title: '广投综合能源', src: '/src/assets/imgs/zh240815.jpg' },
  ];
  // 转换成一个每项至多9个元素的二维数组
  const companyList2D = companyList.reduce((acc: Array<Company[]>, cur: Company, index) => {
    const row = Math.floor(index / 9);
    if (!acc[row]) {
      acc[row] = [];
    }
    acc[row].push(cur);
    return acc;
  }, []);

  // 热门招聘
  interface HotRecruitment {
    id: number;
    title: string;
    number: number;
  }
  const hotRecruitmentList: HotRecruitment[] = [
    { id: 1121, title: '广西壹品慧电子商务有限公司', number: 24 },
    { id: 113, title: '广西邕鼎投资集团有限责任公司', number: 244 },
    { id: 114, title: '云宝宝大数据产业发展有限责任公司', number: 3 },
    { id: 115, title: '广东星艺装饰集团广西有限公司', number: 45 },
    { id: 234432, title: '广西申能达智能技术有限公司', number: 2 },
    { id: 355654, title: '广西蓝海投资集团有限公司', number: 54 },
    { id: 2322, title: '工银安盛人寿保险有限公司广西分公司', number: 2 },
    { id: 11231, title: '广西君时道医药科技有限公司', number: 77 },
    { id: 2345, title: '南宁市国土资源执法监察支队', number: 0 },
    { id: 117667231, title: '南宁中车轨道交通装备有限公司', number: 3 },
    { id: 116778231, title: '广西晨晏节能信息科技有限公司', number: 56 },
    { id: 4567, title: '太平人寿保险有限公司广西分公司', number: 23 },
    { id: 678954, title: '广西慧想云物流有限公司', number: 2 },
    { id: 452, title: '广西晟奥汽车销售服务有限公司', number: 34 },
    { id: 546754, title: '西晟大投资管理有限责任公司', number: 4 },
    { id: 545431, title: '广西网信信息技术有限公司', number: 3 },
    { id: 23345, title: '广西天创未来药业有限公司', number: 1 },
    { id: 546343754, title: '招商证券股份有限公司广西分公司', number: 21 },
    { id: 34266, title: '广西工贸高级技工学校', number: 2 },
    { id: 3462346, title: '南宁伯达投资有限公司', number: 3 },
    { id: 321466, title: '广西晟源城市配送有限责任公司', number: 35 },
    { id: 342266, title: '广西尊和实业有限公司', number: 1 },
  ];
  // 转换成一个每项至多15个元素的二维数组
  const hotRecruitmentList2D = hotRecruitmentList.reduce((acc: Array<HotRecruitment[]>, cur: HotRecruitment, index) => {
    const row = Math.floor(index / 10);
    if (!acc[row]) {
      acc[row] = [];
    }
    acc[row].push(cur);
    return acc;
  }, []);

  return (
    <>
      {/* 顶部广告 */}
      <div
        style={{ display: isVisibleTopAd ? 'block' : 'none' }}
        className="h-[74px] relative bg-no-repeat bg-cover bg-[url('/src/assets/imgs/download_banner@2x.3566be3.png')]"
      >
        <Image
          className="w-[20px] absolute top-[50%] translate-y-[-50%] left-[10px]"
          src="/src/assets/imgs/download_close.png"
          alt="关闭"
          onClick={() => setIsVisibleTopAd(false)}
        />
        <span className="px-[8px] py-[3px] bg-[#fff] text-[#457ccf] rounded-full absolute top-[50%] translate-y-[-50%] right-[10px] text-center">
          点击下载
        </span>
      </div>

      {/* 头部 */}
      <div className="flex items-center bg-white px-[12px] py-[12px]">
        <div className="flex-none">
          <Image className="h-[32px]" src="/src/assets/imgs/logo.png" alt="广西人才网【高仿】" />
        </div>
        <div className="flex-1 flex items-center justify-end">
          <a href="https://share.gxrc.com/HtmlView/disseminate.html" className="py-[3px] text-[14px] color-primary">
            企业招聘
          </a>
          <Divider direction="vertical" className="mx-[16px] h-[20px] top-0" />
          <Link to="/login" className="py-[3px] text-[14px] color-primary">
            求职者登录
          </Link>
        </div>
      </div>

      {/* 搜索 */}
      <div className="flex items-center bg-white px-[12px]">
        <div className="flex-1 flex items-center bg-[#f5f7fa] px-[20px] py-[8px] rounded-full">
          <div
            className="
              flex-none w-auto relative pr-[16px]
              after:block
              after:content-['']
              after:width-[0]
              after:h-[0]
              after:border-[6px]
              after:border-transparent
              after:border-t-black
              after:absolute
              after:right-0
              after:top-[50%]
              after:translate-y-[-3px]
            "
          >
            南宁
          </div>
          <Divider direction="vertical" className="mx-[10px]" />
          <Input className="flex-1" placeholder="搜索职位或公司" readOnly />
        </div>
        <div className="flex-none pl-[12px]">
          <MessageOutline className="text-[34px] text-[#707070]" onClick={() => setIsVisibleChat(true)} />
        </div>
      </div>

      {/* 弹框 */}
      <CenterPopup
        visible={isVisibleChat}
        onMaskClick={() => {
          setIsVisibleChat(false);
        }}
      >
        <div className="p-[30px] pt-[45px] relative">
          <CloseOutline
            className="absolute top-[15px] right-[15px] text-[20px] text-[#999]"
            onClick={() => setIsVisibleChat(false)}
          />
          <div className="text-[16px] mb-[20px]">
            打开<span className="text-[red]">广西人才网APP</span>查看聊天信息
          </div>
          <Button block color="primary" size="middle">
            立即打开
          </Button>
        </div>
      </CenterPopup>

      {/* 广告横幅 */}
      <div className="px-[12px] py-[12px] bg-white">
        <Swiper autoplay loop>
          <Swiper.Item>
            <Image src="/src/assets/imgs/690x280240725.jpg" />
          </Swiper.Item>
          <Swiper.Item>
            <Image src="/src/assets/imgs/sz240717.jpg" />
          </Swiper.Item>
        </Swiper>
      </div>

      {/* 菜单功能入口 */}
      <Grid columns={5} gap={2} className="px-[12px] bg-white">
        {menuList.map((item) => (
          <Grid.Item key={item.title}>
            <Image src={item.icon} className="w-[32px] h-[32px] mx-auto" />
            <div className="text-[12px] text-center pt-[6px] py-[12px] leading-1">{item.title}</div>
          </Grid.Item>
        ))}
      </Grid>

      {/* 链接 */}
      <div className="flex justify-between px-[12px] bg-white">
        <div className="flex-1">
          <a
            href="https://czkt.gxrc.com/LearnOnLine/Touch"
            className="flex flex-col justify-center h-[60px] mr-[10px] pl-[10px] rounded-[4px] bg-[#f2f6fc] bg-[url('/src/assets/imgs/kt-czkt.5d3cc27.png')] bg-no-repeat bg-[center_right_5px] bg-[length:auto_45px]"
          >
            <div className="text-[#3d456b] font-bold">成长课堂</div>
            <div className="text-[#3d456b] text-[10px]">Classroom</div>
          </a>
        </div>
        <div className="flex-1">
          <a
            href="/scene/3"
            className="flex flex-col justify-center h-[60px] ml-[10px] pl-[10px] rounded-[4px] bg-[#f2f6fc] bg-[url('/src/assets/imgs/kt-o2o.6010308.png')] bg-no-repeat bg-[center_right_5px] bg-[length:auto_45px]"
          >
            <div className="text-[#3d456b] font-bold">O2O职通校园</div>
            <div className="text-[#3d456b] text-[10px]">Campus recruitment</div>
          </a>
        </div>
      </div>

      {/* 发现栏 */}
      <div className="pt-[12px] bg-white">
        <NoticeBar
          className="border-none bg-white"
          icon={<Image className="h-[22px]" src="/src/assets/imgs/title-fx.e9a93f9.png" alt="发现" />}
          content={discoverBarText}
          color="default"
        />
      </div>

      {/* 知名企业 */}
      <div className="px-[12px] py-[20px] mt-[15px] bg-white">
        <Image className="w-[101px] h-[19px] mb-[20px]" src="/src/assets/imgs/title-zmqy.76a58f6.png" />
        <Swiper autoplay loop autoplayInterval={4000}>
          {companyList2D.map((item, index) => (
            <Swiper.Item key={index}>
              <Grid columns={3} gap={4}>
                {item.map((company) => (
                  <Grid.Item key={company.id}>
                    <Image className="h-[68px] border border-gray-100" src={company.src} />
                  </Grid.Item>
                ))}
              </Grid>
            </Swiper.Item>
          ))}
        </Swiper>
      </div>

      {/* 热门招聘 */}
      <div className="px-[12px] py-[20px] mt-[15px] bg-white">
        <Image className="w-[101px] h-[19px] mb-[15px]" src="/src/assets/imgs/title-rmzp.61c09c2.png" />
        <Divider />
        <Swiper autoplay loop autoplayInterval={5000}>
          {hotRecruitmentList2D.map((item, index) => (
            <Swiper.Item key={index}>
              {item.map((child) => (
                <div className="flex px-[10px] pb-[10px] mb-[5px]" key={child.id}>
                  <div className="flex-1 text-[16px] mr-[20px]">
                    <Ellipsis direction="end" content={child.title} />
                  </div>
                  <div className="flex-none">
                    <span className="text-blue-500">{child.number}</span>个职位
                  </div>
                </div>
              ))}
            </Swiper.Item>
          ))}
        </Swiper>
      </div>

      {/* 行业、职位 */}
      <ThePositions />

      {/* 底部 */}
      <div className="p-[15px]">
        <div className="flex items-center justify-center leading-[28px]">
          <span className="text-[13px]">电脑版</span>
          <Divider direction="vertical" className="mx-[10px]" />
          <span className="text-[13px]">求职版APP下载</span>
          <Divider direction="vertical" className="mx-[10px]" />
          <span className="text-[13px]">资质证明</span>
          <Divider direction="vertical" className="mx-[10px]" />
          <span className="text-[13px]">企业入口</span>
        </div>
        <div className="text-[12px] text-[#bbb] text-center leading-[18px]">www.gxrc.com(桂ICP备88888888号-8)</div>
      </div>
    </>
  );
}

export default Home;
